<script setup lang="ts">
const props = defineProps({
  label: String,
  value: String,
  image: {
    type: String,
    default: null,
  },
});
</script>

<template>
  <div class="category-wrapper">
    <span>{{ label }}</span>
    <div>
      <img v-if="image" :src="image" alt="image">
      <span>{{ value }}</span>
    </div>
  </div>
</template>

<style scoped>
.category-wrapper {
  display: flex;
  flex-direction: column;
  width: 160px;
}

.category-wrapper > span {
  color: #81838F;
  font-size: 14px;
}

.category-wrapper > div {
  color: #1E7CFF;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 6px;
}
</style>
